<template>
    <!-- 已登录 -->
    <van-row v-if="userInfo" class="user-info">
        <van-image  round width="100" height="100" :src="userInfo.avatar||'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'" />
        <span class="user-info-name">{{ userInfo.username }}</span>
        <van-button plain type="danger" size="mini" @click="onLogout">退出</van-button>
    </van-row>
    <!-- 未登录 -->
     <van-row v-else class="user-info">
        <van-image round width="100" height="100"  :src="avatar_default"/>
        <router-link :to="{path:'/login'}">
            <span class="user-info-name">登录&nbsp;&nbsp;|</span>
        </router-link>
        <router-link :to="{path:'/register'}">
            <span class="user-info-name">注册</span>
        </router-link>
     </van-row>
    <van-grid :column-num="4">
         <van-grid-item v-for="value in list" :key="value" :icon="value.url" :text="value.text" />
    </van-grid>
    <mianban />
    
</template>

<style scoped>
.user-info {
  background: url(../assets//images//user_head_bg.png);
    padding:15px;
    width: auto;
    height: 100%;
    background-size: 100%;
}
.user-info button {
    margin:40px 0 0 10px
}
.user-info-name { 
    display:inline-block;
    color: white;
    padding:40px 0 0 10px;
    font-size: 20px;
}
:deep(.van-badge--top-right) {
    top: 4px;
    right:35px;
    transform: translate(50%,-50%);
}
.user {
    &-group{
        margin-bottom: 15px;
    }
    &-links {
        padding:15px 0;
        font-size: 12px;
        text-align: center;
        .van-icon {
            display: block;
            font-size: 24px;
        }
    }
}
</style>

<script setup>
import avatar_default from '../assets/images/avatar_default.png'
import { useRouter } from 'vue-router';
import mianban from '../components/mianban.vue';
import useToken from '../store/token'
import useUser from '../store/user'
import { onMounted, reactive,ref } from 'vue';
import { showToast } from 'vant';
import { getUser } from '../api/jiekou';
const  {token,removeToken}  = useToken();
const {removeUser} = useUser();
const userInfo = ref(null);
const router = useRouter();

onMounted(()=>{
    console.log(token,'11111');
    if(token){
        getUser().then(result=>{
            userInfo.value = result;
            console.log(result,'11111');
            
        })
    }
})
//推出登录
const onLogout = async() => {
    removeToken()
    removeUser();
    userInfo.value=null
    router.push({path:'/my'})
    showToast({
        message:'退出成功',
        type:'success'
    })
}
//跳转到登录页面
const toLogin = () => {

    console.log(1111);
    
    router.push({
        path:'/login',
    })
}

const list = reactive([
    {url:'pending-payment',text:'待付款'},
    {url:'records-o',text:'待收货'},
    {url:'tosend',text:'待评价'},
    {url:'logistics',text:'退换/售后'},
])
</script>